<template>
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :label-position="labelPosition" label="昵称" prop="nickname" label-width="120">
			    <u-input placeholder="请输入昵称" v-model="model.nickname" type="text"></u-input>
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="性别" prop="sexText" label-width="120">
				<u-input type="select" :select-open="actionSheetShow" v-model="model.sexText" placeholder="请选择性别" @click="actionSheetShow = true"></u-input>
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="简介" prop="intro" label-width="120">
				<u-input type="textarea" placeholder="请填写简介" v-model="model.intro" />
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="头像" prop="avatar" label-width="120">
				<u-upload ref="uUpload" :show-progress="false" :auto-upload="true" width="160" height="160" :action="action" :header="upHeader" :max-size="5 * 1024 * 1024" max-count="1"></u-upload>
			</u-form-item>
		</u-form>
		<u-button :disabled="!isCanSubmit" @click="submit" :style="[inputStyle]" class="button">提交</u-button>
		<u-action-sheet :list="sexSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapActions } from 'vuex'
	export default {
		data() {
			return {
				isCanSubmit: true,
				action: this.$config.domain + '/v1/attach/upload',
				upHeader:{},
				model: {
					nickname: '',
					sex: 0,
					sexText: '',
					intro: '',
					avatar: ''
				},
				rules: {
					nickname: [
						{
							required: true,
							message: '请输入昵称',
							trigger: 'blur' ,
						},
						{
							min: 2,
							max: 6,
							message: '昵称长度在2到6个字符',
							trigger: ['change','blur'],
						}
					],
					sex: [
						{
							required: true,
							message: '请选择性别',
							trigger: 'change'
						},
					],
					intro: [
						{
							required: true,
							message: '请填写简介'
						},
						{
							min: 5,
							message: '简介不能少于5个字',
							trigger: 'change' ,
						}
					]
				},
				sexSheetList: [
					{
						text: '保密'
					},
					{
						text: '男'
					},
					{
						text: '女'
					}
				],
				actionSheetShow: false,
				labelPosition: 'left',
				errorType: ['message'],
			};
		},
		async created() {
			this.upHeader = {'Authorization':"Bearer " + this.loginInfo.token}
			await this.updateUserInfo()
			this.model = this.userInfo
			this.model.sex = this.userInfo.sex
			this.model.sexText = this.sexSheetList[this.userInfo.sex].text
		},
		computed: {
			...mapGetters(['isLogin']),
			...mapState(['loginInfo', 'userInfo']),
			inputStyle() {
				let style = {};
				if (this.model.nickname) {
					style.color = "#fff";
					style.backgroundColor = this.$u.color['warning'];
				}
				return style;
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			...mapActions(['loginAction', 'updateUserInfo']),
			// async getUserInfo() {
			// 	let res = await this.$u.api.userInfo()
			// 	if (res != '') {
			// 		this.model = res.data
			// 		this.model.sex = res.data.sex
			// 		this.model.sexText = this.sexSheetList[res.data.sex].text
			// 	}
			// },
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let files = [];	
						files = this.$refs.uUpload.lists.filter(val => {
							return val.progress == 100;
						})
						if (files.length > 0) {
							this.model.avatar = files[0].response.data[0]
						}
						this.userModify()
						
					} else {
						console.log('验证失败')
					}
				});
			},
			async userModify() {
				this.isCanSubmit = false
				let res = await this.$u.api.userModify({nickname:this.model.nickname, sex:this.model.sex, intro:this.model.intro,avatar:this.model.avatar})
				if (res != '') {
					this.$u.toast(res.message)
					setTimeout(() => {
						this.$u.route({
							type: 'back',
							animationType: 'pop-out'
						})
					}, 1000)
				} else {
					setTimeout(() => {
						this.isCanSubmit = true
					}, 2000)
				}
			},
			actionSheetCallback (index) {
				this.model.sex = index
				this.model.sexText = this.sexSheetList[index].text
			}
		}
	}
</script>

<style scoped lang="scss">
.wrap {
	padding: 30rpx;
	.button {
		margin-top: 20px;
		background-color: rgb(253, 243, 208);
		color: $u-tips-color;
		border: none;
		&::after {
			border: none;
		}
	}
}
</style>